<template>
  <div>
    <div class="viewerContainer">
      <div class="pdfViewer"></div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";

  import "pdfjs-dist/web/pdf_viewer.css";
  import { PDFViewer, EventBus, DownloadManager, PDFLinkService, NullL10n } from "pdfjs-dist/web/pdf_viewer";

  import { GlobalWorkerOptions, getDocument } from "pdfjs-dist";

  if (typeof window !== "undefined" && "Worker" in window) {
    GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js");
  }

  @Component({
    name: "ComponentName",
  })
  export default class extends Vue {
    mounted() {
      const eventBus = new EventBus();
      const linkService = new PDFLinkService({
        eventBus,
      });
      linkService.externalLinkEnabled = false; // 禁用链接

      const pdfViewer = new PDFViewer({
        container: this.$el.querySelector(".viewerContainer") as HTMLDivElement,
        viewer: this.$el.querySelector(".pdfViewer") as HTMLDivElement,
        eventBus,
        downloadManager: new DownloadManager(),
        linkService,
        renderer: "svg",
        l10n: NullL10n,
        textLayerMode: 0,
        useOnlyCssZoom: true,
      });
      eventBus.on("pagesinit", () => {
        pdfViewer.currentScaleValue = "auto"; // 设置默认缩放根据屏幕自适应
      });

      getDocument({
        url: "0.pdf", // 此处获取的是public 下的 5.pdf 文件
        maxImageSize: 1024 * 1024,

        cMapPacked: true,
        pdfBug: true,
        fontExtraProperties: true,
        stopAtErrors: false,
      }).promise.then(doc => {
        pdfViewer.setDocument(doc);
        linkService.setDocument(doc);
      });
    }
  }
</script>

<style lang="scss" scoped>
  .viewerContainer {
    position: absolute;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
  }
</style>
